<template>
  <el-table :data="data">
    <el-table-column v-for="col in columns" :label="col.label" :prop="col.prop" :width="col.width">
      <template #default="{ row }">{{ row[col.prop] || '--' }}</template>
    </el-table-column>
  </el-table>
</template>

<script setup name="Table">
import {
  propColumns,
  eventColumns,
  slotColumns,
  methodColumns,
  provideColumns,
  paramColumns,
  configColumns,
  exposeColumns,
} from './columns'
import { computed } from 'vue'

const props = defineProps({
  type: String, // props,methods
  data: Array,
})

const columns = computed(() => {
  if (props.type === 'props') return propColumns
  else if (props.type === 'event') return eventColumns
  else if (props.type === 'slot') return slotColumns
  else if (props.type === 'method') return methodColumns
  else if (props.type === 'provide') return provideColumns
  else if (props.type === 'param') return paramColumns
  else if (props.type === 'config') return configColumns
  else if (props.type === 'expose') return exposeColumns
  else return propColumns
})
</script>
